Установка скрипта «Весь каталог на одной странице»

Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Cкрипт «Весь каталог на одной странице» позволит вашим пользователям просматривать большее количество товаров. Когда посетитель пролистывает каталог до переключателя страниц, скрипт автоматически загружает товары со следующей страницы. При этом посетителю не нужно ждать, пока загрузится вся страница, он может смотреть товары всего через одну секунду:



    Требования к установке:
  • модуль Интернет магазин;

Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

Первый шаг: загрузка файлов

Перейдите в Панель управления » Файловый менеджер.
В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js.
Кликните на галочку и ура, мы создали папку с нужным именем!:)

Теперь зайдите в папку js и загрузите в эту папку файлы "um.npLoader.js" и jquery.appear.js из архива со скриптом (папка "скрипты").

Второй шаг: установка кода

Перейдите в панель управления и выберите в главном меню Дизайн - Управление дизайном (шаблоны). На открывшейся странице выберите Каталог товаров:

Перед закрывающим тегом </body> добавьте код: 

<script src="/js/jquery.appear.js"></script>
<script src="/js/um.npLoader.js"></script>
<script>
  um.lp = 1+$CURRENT_PAGE$;
  um.cu = '$CAT_URL$';
  $('.slist>a').live('click',function(){
	um.lp = 1+$CURRENT_PAGE$;
	um.cu = '$CAT_URL$';
  });
</script>

Нажмите "Сохранить".

Убедитесь, что в шаблоне имеется переключателя страниц <?$DRAW_BLOCK$('PAGE_SELECTOR','plist')?> в единственном экземпляре в нижней части страницы. Если у вас в шаблоне, нет такого кода, то просто добавьте его после $BODY$.

Третий шаг: установка стилей

Скрипт добавляет разделитель с классом separator. Чтобы разместить стили для этого списка, перейдите в панель управления и в главном меню выберите Дизайн - Управление дизайном (шаблоны). На открывшейся странице выберите Таблица стилей (CSS) в разделе интернет магазина:

В шаблон добавьте следующие стили: 

/* Разделитель страниц */
.separator {
margin: 40px 0;
}
.separator hr {
    display: inline-block;
    width: 35%;
	margin: 5px 0;
}
.separator span {
    width: 30%;
    display: inline-block;
    text-align: center;
	color:#999;
}

Пример:

Нажмите "Сохранить".

    Информация о классах:
  • .separator – контейнер с разделителем между товарами разных страниц;
    • .separator hr – горизонтальная линия. Испольуется до и после текста;
    • .separator span – текст в разделителе. Например, "Страница 5 из 25".

Четвёртый шаг: настройка и использование

Перейдите в каталог товаров и пролистайте вниз до переключателя страниц. Как только переключатель появится в зоне видимости окна браузера, он сменится индикатором загрузки. По окончанию загрузки на месте индикатора появится разделитель страниц. А под ним - товары со следующей страницы.

Если это не происходит, вернитесь к шагу 2 и проверьте правильность выполненных действий.

Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.